<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function f(x) {
            var sl = document.getElementById("sl");
            var dj = document.getElementById("dj");
            var xj = document.getElementById("xj");
            var cb = document.getElementsByClassName("cb");
            var zj = document.getElementById("zj");
            if (x.checked==true){
                for (var i=0;i<cb.length;i++){
                    if (cb[i].checked==true){
                        cb=cb[i].value;
                        break;
                    }else if (i==cb.length-1) {
                        cb=0;
                    }
                }
                xj.value=Number(sl.value)*Number(dj.value)
                zj.value=Number(xj.value)+Number(cb);
            }else {
                for (var i=0;i<cb.length;i++){
                    cb[i].checked=false;
                }
                sl.value="";
                dj.value="";
                xj.value="";
                zj.value="";
            }
        }
    </script>
</head>
<body>
数量:<input id="sl" type="text"/>
单价:<input id="dj" type="text"/>
<br/>
小计:<input id="xj" type="text"/>
<br/>
选购项目:<input type="checkbox" class="cb" value="500"/>光驱500元 <input type="checkbox" class="cb" value="500"/>硬盘500元 <input type="checkbox" class="cb" value="1500"/>显示器1500元
<br/>
<input type="checkbox" onclick="f(this)"/>自动计算
<br/>
总价:<input id="zj" type="text"/>
</body>
</html>